<template>
  <div class="home">
    <div class="header">
      <div class="header-left"></div>
      <div class="header-middle">
        <p>
          <span>上海市医药供应链第三方药品追溯平台</span>
          </br>
          <span>Shanghai Medical Supply Chain Third-party Drug Traceability Platform</span>
        </p>
      </div>
      <div class="header-right">
        <ul class="admin-wrap">
          <li style="cursor:pointer">
            <span class="admin-pic">
              <img src="../assets/icon-10.png" alt="">
            </span>
            <el-dropdown>
              <span class="el-dropdown-link">
                {{name}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="personInfo">个人信息</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="changePassVisible = true">修改密码</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li>
            <span class="img-wrap">
              <el-badge :value="3" class="item">
                <img src="../assets/test2.jpg" alt="" style="width:24px;">
              </el-badge>
            </span>
          </li>
          <li>
            <router-link class="img-wrap" to='/login'>
              <img src="../assets/icon-12.png" alt="">
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- <el-row class="tac">
      <el-col :span="4" id="tabNav">
        <el-menu default-active="2" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#539cf8"
          text-color="#fff" active-text-color="#fff">
          <el-submenu index="1">
            <template slot="title">
              <span>
                <img src="../assets/icon-08.png" alt="">
              </span>
              <span>超级权限管理</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="1-1">
                <template slot="title">入驻企业管理</template>
                <el-menu-item index="1-1-1" :route="{path: '/home/CompanyAudit'}">入驻企业审核</el-menu-item>
                <el-menu-item index="1-1-2" @click="companySerach" :route="{path: '/home/CompanySearch'}">企业查询</el-menu-item>
              </el-submenu>
              <el-menu-item index="1-2" :route="{path: '/home/CompanyLink'}">企业关联关系管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-3" :route="{path: '/home/CompanyIndex'}">企业药品目录管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-4" @click="drugSearch" :route="{path: '/home/MedicineCode'}">药品追溯码管理</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-5">
              <template slot="title">用户授权管理</template>
              <el-menu-item index="1-5-1" :route="{path: '/home/GoveronmentStaff'}">政府官员</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20" class="home-content">
        <router-view></router-view>
      </el-col>
    </el-row> -->
    <template>
      <!-- 企业权限 -->
      <el-row class="tac" v-if="this.adminId !== '1'">
        <el-col :span="4" id="tabNav">
          <el-menu default-active="2" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#1f2938"
            text-color="#828993" active-text-color="#fff">
            <div style="padding:10px">
              <span>
                <!-- <img src="../assets/icon-08.png" alt="" style="vertical-align:bottom"> -->
              </span>
              <span style="color: #828993; ">企业权限管理</span>
            </div>
            <el-menu-item-group>
              <el-submenu index="1-1">
                <template slot="title">
                  <img class="image-icon" src="../assets/enterprise.png" />
                  <span>企业信息</span>
                </template>
                <el-menu-item index="1-1-1" :route="{path: '/home/company_base'}">基本信息</el-menu-item>
                <el-menu-item index="1-1-2" :route="{path: '/home/company_contact'}">联系人信息</el-menu-item>
                <!-- <el-menu-item index="1-1-3" :route="{path: '/home/company_gsp'}">gsp证书</el-menu-item>
                <el-menu-item index="1-1-4" :route="{path: '/home/company_licence'}">许可证</el-menu-item> -->
                <el-menu-item index="1-1-3" :route="{path: '/home/company_link_add'}">首营企业管理</el-menu-item>
              </el-submenu>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-submenu index="1-2">
                <template slot="title">
                  <img class="image-icon" src="../assets/medicine.png" /> 药品管理</template>
                <el-menu-item index="1-2-1" :route="{path: '/home/company_drugs_search'}">药品查询</el-menu-item>
                <el-menu-item index="1-2-2" :route="{path: '/home/company_drugs_add'}">药品添加</el-menu-item>
              </el-submenu>
              <!-- <el-menu-item index="1-1-3" :route="{path: '/home/company_drugs_image'}">图片信息</el-menu-item> -->
            </el-menu-item-group>
            <!-- <el-menu-item-group>
              <el-menu-item index="1-3" :route="{path: '/home/company_drugs_store'}">药品出入库管理</el-menu-item>
            </el-menu-item-group> -->
            <el-menu-item-group>
              <el-submenu index="1-3">
                <template slot="title">
                  <img class="image-icon" src="../assets/trace.png" />追溯码管理</template>
                <el-menu-item index="1-3-1" :route="{path: '/home/company_medcode_search'}"> 追溯码查询</el-menu-item>
                <!-- <el-menu-item index="1-3-2" :route="{path: '/home/company_medcode_location'}"> 位置信息</el-menu-item> -->
              </el-submenu>

            </el-menu-item-group>
            <!-- <el-menu-item-group>
              <el-menu-item index="1-5" :route="{path: '/home/company_link'}">企业关联关系管理</el-menu-item>
            </el-menu-item-group> -->
            <el-submenu index="1-4">
              <template slot="title">
                <img class="image-icon" src="../assets/member.png" /> 企业用户</template>
              <el-menu-item index="1-4-1" :route="{path: '/home/company_operate'}">查询</el-menu-item>
              <el-menu-item index="1-4-2" :route="{path: '/home/company_order'}">添加</el-menu-item>
            </el-submenu>
            <el-submenu index="1-5">
              <template slot="title">
                <img class="image-icon" src="../assets/charts.png" />图表分析</template>
              <el-menu-item index="1-5-1" :route="{path: '/home/company_charts'}">图表查看</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :span="20" class="home-content">
          <router-view></router-view>
        </el-col>
      </el-row>
      <!-- 政府权限  -->
      <el-row class="tac" v-if="this.adminId == '1'">
        <el-col :span="4" id="tabNav">
          <el-menu default-active="2" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#1f2938"
            text-color="#828993" active-text-color="#fff">
            <div style="padding:10px">
              <span>
                <!-- <img src="../assets/icon-08.png" alt="" style="vertical-align:bottom"> -->
              </span>
              <span style="color: #828993; ">高级系统管理</span>
            </div>
            <el-menu-item-group>
              <el-submenu index="1-1">
                <template slot="title">
                  <img class="image-icon" src="../assets/enterprise.png" />
                  <span>企业管理</span>
                </template>
                <el-menu-item index="1-1-1" :route="{path: '/home/government_company_search'}">企业查询</el-menu-item>
                <!-- <el-menu-item index="1-1-3" :route="{path: '/home/company_gsp'}">gsp证书</el-menu-item>
                <el-menu-item index="1-1-4" :route="{path: '/home/company_licence'}">许可证</el-menu-item> -->
              </el-submenu>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-submenu index="1-2">
                <template slot="title">
                  <img class="image-icon" src="../assets/medicine.png" /> 药品管理</template>
                <el-menu-item index="1-2-1" :route="{path: '/home/government_drugs_search'}">药品查询</el-menu-item>
              </el-submenu>
              <!-- <el-menu-item index="1-1-3" :route="{path: '/home/company_drugs_image'}">图片信息</el-menu-item> -->
            </el-menu-item-group>
            <!-- <el-menu-item-group>
              <el-menu-item index="1-3" :route="{path: '/home/company_drugs_store'}">药品出入库管理</el-menu-item>
            </el-menu-item-group> -->
            <el-menu-item-group>
              <el-submenu index="1-3">
                <template slot="title">
                  <img class="image-icon" src="../assets/trace.png" />追溯码管理</template>
                <el-menu-item index="1-3-1" :route="{path: '/home/government_medcode_search'}"> 追溯码查询</el-menu-item>
                <!-- <el-menu-item index="1-3-2" :route="{path: '/home/government_medcode_location'}"> 位置查询</el-menu-item> -->
              </el-submenu>

            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">
                <img class="image-icon" src="../assets/charts.png" />图表分析</template>
              <el-menu-item index="1-4-1" :route="{path: '/home/government_charts'}">图表查看</el-menu-item>
            </el-submenu>
            <!-- <el-menu-item-group>
              <el-menu-item index="1-5" :route="{path: '/home/company_link'}">企业关联关系管理</el-menu-item>
            </el-menu-item-group> -->
          </el-menu>
        </el-col>
        <el-col :span="20" class="home-content">
          <router-view></router-view>
        </el-col>
      </el-row>
    </template>

    <el-dialog title="修改密码" :visible.sync="changePassVisible" width="500px">
      <el-form :model="passForm">
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="passForm.new_password1" auto-complete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="passForm.new_password2" auto-complete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePassVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPassForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑信息" :visible.sync="personInfoShow" width="500px">
      <el-form :model="changeForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="changeForm.username" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属公司" :label-width="formLabelWidth">
          <el-input v-model="changeForm.enterprise" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-input v-model="changeForm.birthday" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="changeForm.gender" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="changeForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-input v-model="changeForm.department" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="职务" :label-width="formLabelWidth">
          <el-input v-model="changeForm.job" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="changeForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户类别" :label-width="formLabelWidth" style="text-align:left;">
          <el-select v-model="changeForm.user_type" clearable placeholder="请选择" disabled="">
            <el-option :value="3">初级权限</el-option>
            <el-option :value="2">中级权限</el-option>
            <el-option :value="1">高级权限</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisibleShow = false">取 消</el-button> -->
        <el-button type="primary" @click="personInfoSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '未登录',
        message: 'home',
        adminId: '',
        admintype: '',
        adminToken: '',
        adminUsertype: '',
        passForm: {
          new_password1: '',
          new_password2: ''
        },
        changeForm: '',
        personInfoShow: false,
        changePassVisible: false,
        formLabelWidth: '150px'
      }
    },
    mounted() {
      this.name = this.$store.getters.getInfo.username
      this.adminId = this.$store.getters.getInfo.id
      this.adminToken = this.$store.getters.getInfo.token
      this.adminUsertype = this.$store.getters.getInfo.user_type
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      submitPassForm() {
        if (this.adminId && this.adminToken) {
          this.$http({
            url: '/change-password',
            method: 'post',
            data: this.passForm,
            headers: {
              'Authorization': 'Token ' + this.adminToken
            }
          }).then(response => {
              //success
              console.log(response)
              if (response.status == 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  showClose: true,
                });
              } else {
                this.$message({
                  message: response.data.detail,
                  type: 'warning',
                  showClose: true,
                });
              }
              this.changePassVisible = false
            },
            response => {
              this.$message({
                message: '修改失败',
                type: 'warning',
                showClose: true,
              });
            }).catch(error => {
            if (error.response) {
              // The request was made and the server responded with a status code
              // that falls out of the range of 2xx
              console.log(error.response.data);
              // console.log(error.response.status);
              // console.log(error.response.headers);
            } else if (error.request) {
              console.log(error.request);
            } else {
              console.log('Error', error.message);
            }
            // console.log(error.config);
            this.$message({
              message: '修改失败',
              showClose: true,
              type: 'error'
            });
          });
        } else {
          this.$message({
            message: '登陆已过期，请重新登陆',
            type: 'warning',
            showClose: true,
          });
        }
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      companySerach() {
        this.$http({
          url: '/enterprise/' + this.$store.getters.getInfo.id + '/',
          method: 'get',
          headers: {
            'Authorization': 'Token ' + this.$store.getters.getInfo.token
          },
        }).then(response => {
          // success callback

        }, response => {
          // error callback
        })
      },
      drugSearch() {
        this.$http({
          url: '/drugs/',
          method: 'get',
          headers: {
            'Authorization': 'Token ' + this.$store.getters.getInfo.token
          },
        }).then(response => {
          // success callback

        }, response => {
          // error callback
        })
      },
      personInfo() {
        this.personInfoShow = true
        this.$http({
          url: '/users/' + this.adminId + '/',
          method: 'get',
          headers: {
            'Authorization': 'Token ' + this.$store.getters.getInfo.token
          },
        }).then(response => {
          // success callback
          this.changeForm = response.data

        })
      },
      personInfoSubmit() {
        this.$http({
          url: '/users/' + this.adminId + '/',
          method: 'put',
          headers: {
            'Authorization': 'Token ' + this.$store.getters.getInfo.token
          },
          data: this.changeForm
        }).then(response => {
          this.$message({
            message: '更新成功',
            type: 'success',
          })

        }).catch(error => {
          this.$message({
            message: '更新失败',
            type: 'error',
          })
        })
        this.personInfoShow = false
      }
    }
  }

</script>

<style scoped>
  .home {
    height: 100%;
  }

  .header {
    height: 60px;
    text-align: left;
    padding: 10px 30px;
    background: white;
    box-shadow: 0px 5px 5px #e0e5ef
  }

  .header-left {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: url('../assets/medLogo.png');
    background-size: cover;
    float: left;
    margin-right: 20px;
  }

  .header-middle {
    padding: 3px 10px 0 0;
    float: left;
    height: 60px;
    width: auto;
    color: #539cf8;
    font-weight: bold;
  }

  .header-right {
    margin-top: 14px;
    padding-left: 10px;
    float: right;
    height: 30px;
    width: auto;
    font-size: 23px;
    color: #50535b;
    font-weight: bold;
  }

  .header-middle>p>span:first-child {
    font-size: 23px;
  }

  .header-middle>p>span:last-child {
    font-size: 12px;
  }

  .admin-wrap {
    height: 30px;
    list-style-type: none;
  }

  .admin-wrap>li {
    float: left;
  }

  .admin-wrap>li:first-child {
    border-left: none;
    padding-right: 20px
  }

  .admin-wrap img {
    vertical-align: top;
  }

  .item>>>sup {
    top: 0px;
  }

  .img-wrap {
    box-sizing: border-box;
    display: inline-block;
    height: 20px;
    margin: 7px 0px;
    padding: 0px 20px;
    border-left: 1px solid #d4d8e1;
  }

  .tac {
    text-align: left;
    /* color: #828993; */
    height: calc(100% - 80px);
    /* background: #dedede */
  }

  #tabNav {
    height: 100%!important;
    background: #1f2938;
    overflow: scroll;
    font-weight: 700!important;
  }
  /* .tac >>> i {
    color: #828993;
  } */

  .el-menu {
    border: none;
    border-bottom: 1px solid grey;
  }

  .home .el-submenu>>>.el-menu-item {
    padding-left: 100px!important;
  }

  .el-menu-item-group {
    min-width: 0;
    border-bottom: 1px solid grey;
    font-size: 10px;
  }

  .home-content {
    height: 100%;
    padding: 20px;
  }

  .additem-wrap {
    text-align: right;
    margin: 15px 20px;
  }

  .image-icon {
    padding: 20px 20px;
    width: 20px;
    line-height: 56px;
    vertical-align: bottom;
  }
  .is-active {
    background: #378bc4!important;
    color: white!important;
  }
</style>
